<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" >
<meta http-equiv="Pragma" content="no-cache" >
<meta http-equiv="Cache-Control" content="no-cache" >
<meta http-equiv="Expires" content="-1" >

<link rel="shortcut icon" href="/icon/info.niwota.profile">
<title>Profile</title>

<link rel="stylesheet" href="/assets/style/common.css" type="text/css">

<style type="text/css">
.wrapper { 
	margin-top: 32px;
	margin-bottom: auto;
	margin-left: 32px;
	margin-right: 32px;
	width: 800px; 
	text-align: left; 
	border: none; 
	clear: both;
}

.cell {
  margin: 2px;
  height: auto;
  width: auto;
  float: left;
  text-align: center;
}

.cell img {
  display: inline;
  width: 32px;
  height: 32px;  
  margin: 0px;
  padding: 0px;
  border: none;
}

.cell:hover {
	background-color: orange;
}

.caption {
  text-align: center;
  font-weight: bold;
  width: 100px;
  color: #fff;
  margin: 2px;
}

.breadcrumb {
}

.stats {
	color: #fff;
}


#list {
	padding: 0;
	margin: 0;
	width: auto;
	clear: both;
}

#list li {
	list-style-type:none;
	margin: 0 0 10px 0;
}

#list a, #list a:visited {
	display: inline;
	text-align: left;
	text-decoration: none; 
}

#list a:hover { 
	background: orange; 
	color: #fff; 
} 

.thumb32 {
	max-width: 32px;
	max-height: 32px;
	margin: 0;
	padding: 0;
	border: none;
}

#profile:hover { 
	background-color: #000; 
} 


.cell2 {
  margin: 2px;
  height: auto;
  width: auto;
  float: left;
  text-align: center;
}

.cell2 img {
  display: inline;
  width: 96px;
  height: 96px;  
  margin: 0px;
  padding: 0px;
  border: none;
}

.cell2:hover {
	background-color: orange;
}

.photo {
  width: 96px;
  height: 96px; 
}
</style>

<script type="text/javascript" src="/assets/opt/script/jquery.js"></script>
<script type="text/javascript" src="/assets/opt/ui/tooltip/qtip/jquery.qtip-1.0.0-rc3.js"></script>
<script type="text/javascript" src="/assets/script/uri-1.0.js"></script>
<script type="text/javascript" src="/assets/script/blacktea-1.0.js"></script>
<script type="text/javascript" src="/assets/script/common.js"></script>
<script type="text/javascript" src="/content/info.niwota.profile/assets/script/custom.js"></script>

<script id="profile_tpl" type="text/x-blacktea-template">
<span id="profile-id" style="font-weight:bold; font-size: x-large; margin-bottom: 36px;">${fn:peer}</span>
<table>
<tr>
<td>
<span id="profile-photo" ><img src="${fn:photo}" class="photo" /></span>
</td>
<td>
<span id="profile-name" style="font-weight:normal; font-size: x-large;">${profile.name}</span><br />
<span >Gender: ${fn:gender}</span><br />
<span >DOB: ${profile.dob}</span>
</td>
</tr>
</table>

<span >My location:<br />${fn:location}</span><br />
<span >My time:<br />${fn:time}</span><br /><br />

<span >${profile.welcome}</span><br /><br /> 

<span >${fn:call}</span><br />
<span >${fn:text}</span><br /> 
<span >${fn:email}</span><br />
<span >${fn:address}</span><br />
<span >${fn:website}</span><br /><br />

<span >${profile.note}</span><br /><br />

<span >Last updated: ${modified}</span>
<br />
</script>

<script id="peer_tpl" type="text/x-blacktea-template">	
	<a class="cell" href="${fn:appbase}peer=${username}">
		<img src="/assets/opt/tango-icon-theme/22x22/apps/${fn:status}" />
		<div class="caption">${fn:label}</div>
	</a>
</script>

<script id="buddy_tpl" type="text/x-blacktea-template">	
	<a class="cell2" href="/content/info.niwota.profile/?peer=${peer}" title="${peer}" >
		<img src="${fn:photo}" class="photo" />
		<div class="caption">${profile.name}</div>
	</a>
</script>


<script type="text/javascript">
function formatProfile(d) {
	function drawableLink(name) {
		return '<img src="/content/info.niwota.profile/res/drawable/'+name+'" />';
	}
	function webLink(s) {
		return (s ? '<a target="_blank" href="'+s+'" >'+s+'</a>' : '');
	}
	function mapLink(s) {
		return (s ? '<a target="_blank" href="http://maps.google.com/maps?q='+s+'" >'+s+'</a>' : '');
	}
	function emailLink(s) {
		return (s ? '<a target="_blank" href="mailto:'+s+'">'+s+'</a>' : '');
	}
	var peer = d['peer'] || '';
	var fn = { 
		photo: function () {
			return d['profile.photo'] ? 
				'/content/info.niwota.profile/bin/photo?data=true&size=thumbnail&peer='+(peer)+'&ts='+(d['profile.photo.modified'])
				: '/content/info.niwota.profile/assets/image/avatar_unknown96.png';
		},
		peer: peer,
		gender: (d['profile.gender'] == '1' ? 'M' : d['profile.gender'] == '2' ? 'F' : ''),
		location: drawableLink('sym_action_map')+mapLink(d['profile.location']),
		time: drawableLink('sym_action_time')+d['profile.time'],
		call: drawableLink('sym_action_call_grey')+d['profile.call'],
		text: drawableLink('sym_action_sms')+d['profile.text'],
		email: drawableLink('sym_action_email')+emailLink(d['profile.email']),
		address: drawableLink('sym_action_map')+ mapLink(d['profile.address']),
		website: drawableLink('sym_action_web')+webLink(d['profile.website'])
	};
	return blacktea('profile_tpl')(d, fn);
}

function formatPeer(data, app) {
	function baseQueryLink(l) {
		var idx = l.indexOf('?');
		if (idx == -1) {
			return l + '?';
		}
		var len_1 = l.length - 1;
		if (idx < len_1) {
			return l + '&';
		}
		//idx == len_1
		return l;
	}
	function formatLabel(label) {
		var idx = label.indexOf('@');
		return idx == -1 ? label : label.substring(0, idx) + '<br />' + label.substring(idx);
	}
	var fn = { 
		appbase: baseQueryLink(app ? app : '/home/?type=html' ),
		status: function () {
			return this.status > 0 ? 'system-users.png' : 'system-users-off.png';
		},
		label: function () {
			var l = this.name || this.username;
			return formatLabel(l);
		}
	};
	return blacktea('peer_tpl', data.peers, fn, '<br style="clear: both;" />', 7);
}

</script>

<script type="text/javascript">
var spinner = '<img src="/assets/image/spin.gif" alt="Please wait..." ><span style="color: white; font-size: xx-large;">...<blink>.....</blink></span>';
var jsonp = '/content/info.niwota.profile/jsonp/profile/getProfile?peer=';
var view_data = null;

$(document).ready(function(){
	initPage();
	//
	$.initOptionMenu();
});

function initPage() {
	var peer = (data ? data.peer : '');
	getProfile(peer); 
}

function getProfile(who) {
	$('#list').html('');
	$('#profile').html(spinner);
	var url = jsonp +  who; 
	
	$.get(url, function(d) {
		showProfile(d);
	});
}

function showProfile(d) {
	if (!d) {
		$('#profile').html('');
		return;
	}
	view_data = d; //cache it
	
	var html = formatProfile(d);
	$('#profile').html(html);
}

function listPeer() {
	$('#profile-frame').hide();
	$('#peer-list').html(spinner);

	$.get('/home?type=json', function(d) {
		showTitle(d);
		showProfile(d);
		showPeers(d, '/content/info.niwota.profile/');
	});
	return false;
}

function showTitle(d, def) {
	document.title = (d ? d['site.name'] || d['site.id'] : (def ? def : 'Hotweb'));
}

function showPeers(d, app) {
	var peerpanel = $('#peer-panel');
	var peerlist = $('#peer-list', peerpanel);
	if (d && d.peers && d.peers.length > 0) { 
		peerpanel.show(); 
		peerlist.html(formatPeer(d, app)); 
	} else { 
		peerpanel.hide(); 
	}
}

function showVisited(d) {
	var fn = { 
		photo: function () { 
			return d['profile.photo'] ? 
			'/content/info.niwota.profile/bin/photo?data=true&size=thumbnail&peer='+(d['peer'])+'&ts='+(d['profile.photo.modified'])
			: '/content/info.niwota.profile/assets/image/avatar_unknown96.png';
		} 
	};
	var html = blacktea('buddy_tpl', d.peers, fn, '<br style="clear: both;" />', 7);
	$('#peer-list').html(html);
}

function listRecent() {
	$('#profile-frame').hide();
	$('#peer-list').html(spinner);
	
	$.get('/content/info.niwota.profile/jsonp/profile/listProfile?type=json&sort=recent', showVisited);
	return false;
}

function listFavorite() {
	$('#profile-frame').hide();
	$('#peer-list').html(spinner);
	
	$.get('/content/info.niwota.profile/jsonp/profile/listProfile?type=json&sort=favorite', showVisited);
	return false;
}
</script>
</head>
<body>

<div id="topnav">
	<a class="logo" href="/content/info.niwota.profile" title="Stay connected with friends">
	<img class="icon32" src="/icon/info.niwota.profile"  alt="Profile" >
	<span>Profile</span>
	</a>

	<span class="top-center">
	</span>
	
	<span class="top-right" style="margin-right: 64px;">
	<span class="action"><a class="" href="#" onclick="listPeer();">Peers</a></span>&nbsp;.
	<span class="action"><a class="" href="#" onclick="listRecent();">Recent</a></span>&nbsp;.
	<span class="action"><a class="" href="#" onclick="listFavorite();">Favorite</a></span>&nbsp;
	|&nbsp;
	<!--
	<span class="action"><a class="" href="#" onclick="viewProfile();">My profile</a></span>&nbsp;|&nbsp;
	<span class="action"><a class="" href="#" onclick="editProfile();">Edit profile</a></span>&nbsp;|&nbsp;
	-->
	<span class="action"><a class="" target="help" href="/content/info.niwota.profile/assets/web/help.htm" >Help</a></span>&nbsp;|&nbsp;
	<span class="action"><a href="#" onclick="self.close();">Quit</a></span>
	</span>
</div>

<!--page content-->
<div id="page-content">

<div style="clear: both;"></div>

<div id="profile-frame">
<table cellspacing="4" cellpadding="8" border="0" >
<tbody>
<tr> 
<td>

<div id="profile" style="margin: 16px; padding: 16px; color: #fff; width: 480px;">
</div>

</td>
</tr>
</tbody>
</table>
</div>

<div style="clear: both;"></div>

<div id="peer-panel" style="display: none;" class="wrapper">
<div class="section-title"></div>

<div id="peer-list" class="section"></div>
</div>

</div>
<!--//page content-->

<div id="optionmenu">
<a class="" href="#" onclick="listPeer();" title="Peers" ><img src="/content/info.niwota.profile/res/drawable/ic_menu_peers" /></a>
<!--
<a class="" href="#" onclick="viewProfile();" title="My profile" ><img src="/content/info.niwota.profile/res/drawable/ic_menu_profile" /></a>
<a class="" href="#" onclick="editProfile();" title="Edit profile" ><img src="/res/drawable/ic_menu_edit" /></a>
-->
<a class="" target="help" href="/content/info.niwota.profile/assets/web/help.htm" title="Help" ><img src="/res/drawable/ic_menu_help" /></a>
<a href="#" title="Quit" onclick="self.close();"><img src="/res/drawable/ic_menu_done" /></a>
</div>

<div id="footer">
<span style="color: #fff;">Profile 1.0.0 &copy; 2010 All rights reserved</span>
</div>

<div id="wallpaper" style="display: block;"><img src="/wallpaper" width="100%" height="100%" /></div>

</body>
</html>